<template>
	<view class="wrapper">
		<view>数据</view>
		<view class="data-wrapper">
			<view class="data-content">
				<view class="data-item">
					<view>商户</view>
					<view>(今日新增)</view>
					<view><span>0</span>个</view>
				</view>
				<view class="data-item" style="border-right: 1px solid #fff;">
					<view>商户</view>
					<view>(今日激活)</view>
					<view><span>0</span>个</view>
				</view>
				<view class="data-item">
					<view>商户</view>
					<view>(累计)</view>
					<view><span>0</span>个</view>
				</view>
				<view class="data-item">
					<view>下级</view>
					<view>(累计)</view>
					<view><span>0</span>个</view>
				</view>
			</view>
		</view>
		<view class="totalData-wrapper">
			<view class="totalData">
				<view class="totalData-item">
					<view>本月</view>
					<view>
						<view>新增商户(个)</view>
						<view>0</view>
					</view>
					<view>
						<view>激活商户(个)</view>
						<view>0</view>
					</view>
				</view>
				<view class="totalData-item">
					<view>上月</view>
					<view>
						<view>新增商户(个)</view>
						<view>0</view>
					</view>
					<view>
						<view>激活商户(个)</view>
						<view>0</view>
					</view>
				</view>
			</view>
		</view>
		
		
		
		<!-- <view class="header-bg">
			<view class="title">数据</view>
		</view> -->
		<view class="e-content">
			<view class="filter flex-align-center">
				<!-- <view class="brand"></view> -->
				<view class="type" @click.stop="changeEChartType">
					<!-- <text class="iconfont icon-bangzhu"></text> -->
					{{ eChartType == 0 ? '近15日交易量趋势图' : '近15日交易统计(按交易类型)' }}
					<text class="iconfont icon-xiajiantou"></text>
				</view>
				<policyFilter myKey="ring" @confirm="confirm" :policyCode="query.policyCode1"></policyFilter>
			</view>
			<view class="echart">
				<template v-if="eChartType == 0">
					<qiun-data-charts v-if="lineData.categories.length > 0" :opts="line.opts" type="area" :chartData="lineData" />

					<div class="none" v-else>暂无数据</div>
				</template>
				<template v-if="eChartType == 1">
					<qiun-data-charts type="ring" :opts="pie.opts" :chartData="pieData" />
				</template>
			</view>
		</view>
		<view class="daily-data-box">
			<view class="tag-title flex-space-between">
				<text class="name">日常数据</text>
				<policyFilter myKey="line" @confirm="confirm" :policyCode="query.policyCode2"></policyFilter>
			</view>
			<view class="daily-data-box-middle">
				<view class="date">
					近30天统计数据
				</view>
				<view class="tab">
					<view class="tab-item" v-for="(item,index) in dataNavList" :class="navIndex == index ? 'active' : ''"
					 :key="index" @click="changeNav(index)">
					 {{item.name}}
					</view>
					<!-- <u-tabs active-color="#4286F5" :list="dataNavList" :is-scroll="false" bg-color="transparent" :current="navIndex"
					 @change="changeNav"></u-tabs> -->
				</view>
			</view>


			<view class="data-box">
				<view class="nav-box">

					<!-- <text
			  :class="navIndex == index ? 'a' + index : ''"
			  @click="changeNav(index)"
			  v-for="(item, index) in dataNavList"
			  :key="index"
			  >{{ item.title }}</text
			> -->
				</view>
				<div class="d-bg-b">
					<div class="l-box">
						<view class="d-box flex-column" :class="{ tradingBox: navIndex == 3 }" v-for="(item, i) in dataNavList[navIndex].subList"
						 :key="i" :style="{ background: item.bgColor}">
							<view class="num">{{ item.type == 'money' ? toFixedNum(item.value) : Number(item.value) }}</view>
							<view class="title">{{ item.title }}</view>
							<!-- <view class="sub-title">{{ item.sub }}</view> -->
						</view>
					</div>
				</div>
				<view class=""></view>
			</view>
		</view>

		<view v-if="!$store.state.user.isSpecificAccount">
			<view class="content-box">
				<view class="tag-title2">
					相关指标
					<!-- <policyFilter key="data"></policyFilter> -->
				</view>
				<view class="module-list flex-space-between">
					<view class="item flex-column" v-for="(item, i) in mList" :key="i" :style="{ backgroundImage: 'url(' + item.bg + ')',color:item.color }"
					 @click="nav(item.path)">
						<text class="name">{{ item.name }}</text>
						<text class="sub">{{ item.sub }}</text>
						<text class="info">{{ item.info }}</text>
					</view>
				</view>
			</view>
		</view>

		<m-footer :tabIdx="1"></m-footer>
	</view>
</template>

<script>
	import {
		echartData,
		dailyData
	} from '_a/data/index';

	export default {
		data() {
			return {
				dataNavList: [{
						name: '本人',
						value: 2,
						subList: [{
								title: '激活台数(台)',
								value: '0.00',
								sub: '近30天',
								type: 'number',
								bgColor: '#F6E7EE',
								key: 'activeTermCount'
							},
							{
								title: '伪激活台数(台)',
								value: '0.00',
								sub: '近30天',
								type: 'number',
								bgColor: '#DFECFC',
								key: 'fackActiveTermCount'
							},
							{
								title: '达标商户(个)',
								value: '0.00',
								sub: '近30天',
								type: 'number',
								bgColor: '#DEF9EE',
								key: 'standardMerchCount'
							},
							{
								title: '未达标商户(个)',
								value: '0.00',
								sub: '近30天',
								type: 'number',
								bgColor: '#F7F2D8',
								key: 'nonStandardMerchCount'
							},
							{
								title: '扣款金额(元)',
								value: '0.00',
								sub: '近30天',
								type: 'money',
								bgColor: '#F5E2E3',
								key: 'dedAmount'
							},
							{
								title: '本月交易量(元)',
								value: '0.00',
								sub: '近30天',
								type: 'money',
								bgColor: '#E4F7F6',
								key: 'amountByDays'
							},
							{
								title: '贷记卡交易量(元)',
								value: '0.00',
								sub: '近30天',
								type: 'money',
								bgColor: '#F7F3E2',
								key: 'creditAmountByDays'
							}
							// ,
							// {
							// 	title: '月台均(万元)',
							// 	value: '0.00',
							// 	sub: '近30天',
							// 	type: 'money',
							// 	bgColor: '#D0EBCF',
							// 	key: 'monAveNum'
							// }
						]
					},
					{
						name: '直属代理商',
						value: 0,
						subList: [{
								title: '激活台数(台)',
								value: '0.00',
								sub: '近30天',
								type: 'number',
								bgColor: '#F6E7EE',
								key: 'activeTermCount'
							},
							{
								title: '伪激活台数(台)',
								value: '0.00',
								sub: '近30天',
								type: 'number',
								bgColor: '#DFECFC',
								key: 'fackActiveTermCount'
							},
							{
								title: '达标商户(个)',
								value: '0.00',
								sub: '近30天',
								type: 'number',
								bgColor: '#DEF9EE',
								key: 'standardMerchCount'
							},
							{
								title: '未达标商户(个)',
								value: '0.00',
								sub: '近30天',
								type: 'number',
								bgColor: '#F7F2D8',
								key: 'nonStandardMerchCount'
							},
							{
								title: '扣款金额(元)',
								value: '0.00',
								sub: '近30天',
								type: 'number',
								bgColor: '#F5E2E3',
								key: 'dedAmount'
							},
							{
								title: '本月交易量(元)',
								value: '0.00',
								sub: '近30天',
								type: 'number',
								bgColor: '#E4F7F6',
								key: 'amountByDays'
							},
							{
								title: '贷记卡交易量(元)',
								value: '0.00',
								sub: '近30天',
								type: 'number',
								bgColor: '#F7F3E2',
								key: 'creditAmountByDays'
							}
							// ,
							// {
							// 	title: '月台均(万元)',
							// 	value: '0.00',
							// 	sub: '近30天',
							// 	type: 'number',
							// 	bgColor: '#D0EBCF',
							// 	key: 'monAveNum'
							// }
						]
					},
					{
						name: '团队',
						value: 1,
						subList: [{
								title: '激活台数(台)',
								value: '0.00',
								sub: '近30天',
								type: 'number',
								bgColor: '#F6E7EE',
								key: 'activeTermCount'
							},
							{
								title: '伪激活台数(台)',
								value: '0.00',
								sub: '近30天',
								type: 'number',
								bgColor: '#DFECFC',
								key: 'fackActiveTermCount'
							},
							{
								title: '达标商户(个)',
								value: '0.00',
								sub: '近30天',
								type: 'number',
								bgColor: '#DEF9EE',
								key: 'standardMerchCount'
							},
							{
								title: '未达标商户(个)',
								value: '0.00',
								sub: '近30天',
								type: 'number',
								bgColor: '#F7F2D8',
								key: 'nonStandardMerchCount'
							},
							{
								title: '扣款金额(元)',
								value: '0.00',
								sub: '近30天',
								type: 'number',
								bgColor: '#F5E2E3',
								key: 'dedAmount'
							},
							{
								title: '本月交易量(元)',
								value: '0.00',
								sub: '近30天',
								type: 'number',
								bgColor: '#E4F7F6',
								key: 'amountByDays'
							},
							{
								title: '贷记卡交易量(元)',
								value: '0.00',
								sub: '近30天',
								type: 'number',
								bgColor: '#F7F3E2',
								key: 'creditAmountByDays'
							}
							// ,
							// {
							// 	title: '月台均(万元)',
							// 	value: '0.00',
							// 	sub: '近30天',
							// 	type: 'number',
							// 	bgColor: '#D0EBCF',
							// 	key: 'monAveNum'
							// }
						]
					}
				],
				mList: [{
						name: '机具指标',
						sub: '机具各项考核指标',
						info: '>>>',
						bg: require('@/common/images/data/content-blue.png'),
						path: '/pages/data/term-info',
						isSpecificAccount: true,
						color: '#49A7E9',
					},
					{
						name: '商户相关',
						sub: '自己与团队新增及累计的商户数',
						info: '>>>',
						bg: require('@/common/images/data/content-green.png'),
						path: '/pages/data/merch-info',
						color: '#58B42C',
					},
					{
						name: '收益',
						sub: '自己与团队收益概况',
						info: '>>>',
						bg: require('@/common/images/data/content-yellow.png'),
						path: '/pages/data/earnings-info',
						color: '#F0BB53',
					},
					{
						name: '团队相关',
						sub: '自己与团队新增及累计的代理商数',
						info: '>>>',
						bg: require('@/common/images/data/content-red.png'),
						path: '/pages/data/team-info',
						isSpecificAccount: true,
						color: '#FF928A',
					}
				],
				navIndex: 0,
				line: {
					opts: {
						color: ['#1890FF'],
						dataPointShapeType: 'hollow',
						dataLabel: false,//数据点上的文本显示
						dataPointShape: false,//是否显示数据点的图形标识
						legend: {
							show: false
						},
						yAxis: {
							gridType: 'dash',
							dashLength: 2
						},
						extra: {
							area: {
								type: 'curve',
								opacity: 0.2,
								addLine: true,
								width: 2,
								gradient: true
							}
						}
					}
				},
				lineData: {
					categories: [],
					series: [{
						name: '交易量',
						data: []
					}]
				},

				pie: {
					opts: {
						dataLabel: false,
						extra: {
							ring: {
								border: false,
								ringWidth: 20
							}
						},
						title: {
							name: '交易总量',
							fontSize: 14,
							color: '#666666'
						},
						subtitle: {
							name: '7999',
							fontSize: 18,
							color: '#7cb5ec'
						},
						color: ['#1890FF', '#91CB74', '#FAC858', '#EE6666', '#73C0DE', '#3CA272', '#FC8452', '#9A60B4', '#ea7ccc']
					}
				},
				pieData: {
					series: [{
						formatter(v) {
							console.log(v);
						},
						data: []
					}]
				},
				eChartType: 0,
				query: {
					days: 30, //查询田叔叔
					policyCode1: this.$store.getters.policyList[0] ? this.$store.getters.policyList[0].policyCode : '',
					policyCode2: this.$store.getters.policyList[0] ? this.$store.getters.policyList[0].policyCode : ''
				},
				totalType: [{
						value: 1,
						name: 'POS贷记卡'
					},
					{
						value: 2,
						name: 'POS借记卡'
					},
					{
						value: 3,
						name: '云闪付'
					},
					{
						value: 4,
						name: '扫码'
					},
					{
						value: 5,
						name: 'VIP贷记卡'
					},
					{
						value: 6,
						name: 'VIP借记卡'
					},
					{
						value: 7,
						name: '快捷'
					}
				]
			};
		},
		created() {
			uni.hideTabBar({});
			this.initData();
		},
		// 下拉刷新
		async onPullDownRefresh() {
			this.$store.dispatch('getUserDetail').then(async res => {
				uni.stopPullDownRefresh();
				await this.initData();
				this.$tip.toast('刷新成功!', 'success', 500);
			});
		},
		methods: {
			async initData() {
				await this.getEchartData();
				await this.getData();
			},
			confirm(code, myKey) {
				if (myKey == 'ring') {
					//ring
					this.query.policyCode1 = code;
					this.getEchartData();
				} else {
					//line
					this.query.policyCode2 = code;
					this.getData();
				}
			},
			getEchartData() {
				echartData({
					days: 15,
					policyCode: this.query.policyCode1
				}).then(res => {
					if (res.code == 200) {
						let line = res.data.detail;
						let pie = res.data.sumDetail;
						this.lineData.categories = line
							.map(item => item.transDate)
							.map(item => {
								item = item.slice(8, 10);
								return item;
							});

						this.lineData.series[0].data = line.map(item => item.totalAmount);
						//   环图
						this.pie.opts.subtitle.name = res.data.sumAmount;
						this.pieData.series[0].data = pie.map(item => {
							item.name = this.$options.filters['totalType'](item.totalType) + '(' + item.prop + '%' + ')';
							item.value = item.amount;
							return item;
						});
						// console.log(this.lineData);
					}
				});
			},
			// 获取数据
			getData() {
				// 本人
				dailyData({
					days: this.query.days,
					agentType: 2,
					policyCode: this.query.policyCode2
				}).then(res => {
					if (res.code == 200) {
						let data = res.data;
						this.dataNavList[0].subList = this.formData(this.dataNavList[0].subList, data);
					}
				});
				//   直属
				dailyData({
					days: this.query.days,
					agentType: 0,
					policyCode: this.query.policyCode2
				}).then(res => {
					if (res.code == 200) {
						let data = res.data;
						this.dataNavList[1].subList = this.formData(this.dataNavList[1].subList, data);
					}
				});
				//   团队
				dailyData({
					days: this.query.days,
					agentType: 1,
					policyCode: this.query.policyCode2
				}).then(res => {
					if (res.code == 200) {
						let data = res.data;
						this.dataNavList[2].subList = this.formData(this.dataNavList[2].subList, data);
					}
				});
			},
			// 格式化请求赋值参数
			formData(list, data) {
				list = list.map(subItem => {
					subItem.value = data[subItem.key];
					return subItem;
				});
				return list;
			},
			changeNav(i) {
				this.navIndex = i;
			},
			nav(path) {
				this.$nav.push({
					path: path
				});
			},
			changeEChartType() {
				uni.showActionSheet({
					itemList: ['折线图', '饼图'],
					success: res => {
						this.eChartType = res.tapIndex;
						console.log(res);
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			}
		}
	};
</script>

<style lang="scss">
	.wrapper{
		padding: $uni-spacing-row-lg;
		
	}
	.data-wrapper{
		background-color: $themeColor;
		padding: $uni-spacing-row-base;
		border-radius: $uni-border-radius-xl;
		.data-content{
			display: flex;
			justify-content: space-between;
			width: 100%;
		}
		.data-item{
			width: 25%;
			text-align: center;
			view{
				color: #fff;
			}
		}
	}
	
	.totalData-wrapper{
		margin-top: $uni-spacing-col-lg;
		.totalData{
			display: flex;
			justify-content: space-between;
			width: 100%;
			.totalData-item{
				width: calc(50% - 5px);
				background-color: $themeColor;
				border-radius: $uni-border-radius-xl;
				padding: $uni-spacing-col-base;
			}
		}
	}
	
	
	
	
	.content-before {
		content: "";
		position: absolute;
		display: block;
		left: R(-20px);
		width: R(14px);
		height: R(14px);
		background-color: #008EFD;
		margin-top: R(15px);
		border-radius: R(50);
	}

	.container {
		padding-bottom: R(150);
	}

	.header-bg {
		background: url(../../common/images/home-new/bg-up.png) no-repeat;
		background-size: 100% 100%;
		padding: R(20px) 0;
		// display: flex;
		align-items: center;
		// position: relative;
		height: R(400px);
		color: #fff;
		margin-bottom: R(80px);

		.title {
			// width: 100%;
			height: R(100px);
			line-height: R(100px);
			font-size: R(40px);
			color: #FFFFFF;
			text-align: center;
		}
	}

	.e-content {
		padding: R(20) R(20) 0;
		// margin: R(-300) R(25) 0;
		height: R(491px);
		background: #ffffff;
		box-shadow: 0px R(17px) R(16px) 0px rgba(11, 51, 116, 0.19);
		border-radius: R(20px);

		.filter {
			font-size: R(28px);
			font-weight: 400;
			color: #666666;
			justify-content: space-between;
			margin-bottom: R(20);
			padding: 0 R(20px);

			.type {
				position: relative;

			}

			.type::before {
				@extend .content-before;
			}

			.icon-xiajiantou {
				font-size: R(24);
				margin-left: R(14);
			}
		}
	}

	.daily-data-box {
		padding: R(30);
		background-color: #FFFFFF;
		box-shadow: 0 R(1px) R(10px) R(1px) rgba(137, 203, 254, 0.41);
		padding: R(20) R(20) 0;
		margin: R(40px)R(25px);
		border-radius: R(20px);

		&-middle {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.date {
				font-size: R(20px);
				color: #909CB3;
				flex: 1;
			}

			.tab {
				flex: 2;
				text-align: right;
				    &-item {
				      padding: R(0) R(16);
				      background: #e6e6e6;
				      text-align: center;
				      display: inline-block;
				      margin-left: 0.1rem;
				      border-radius: R(50);
				    }
				    .active {
				      background: #2998ff;
				      color: white;
					  border-radius: R(50);
				    }
			}
		}
	}

	.tag-title {
		font-size: R(30px);
		font-weight: 500;
		color: #000000;
		margin: R(20);

		.name {
			position: relative;
		}

		// padding: 0 R(36);
		.name::before {
			@extend .content-before;
		}
	}

	.tag-title2 {
		@extend .tag-title;
		margin-top: 0;
	}

	.data-box {
		// margin: 0 R(35) R(30);
		padding-top: R(10);
		// box-shadow: 0px R(6px) R(10px) 0px rgba(11, 171, 254, 0.2);
		border-radius: R(10);
		color: #595959;
		position: relative;
		overflow: hidden;
		// background: url('../../common/images/data/nav-bg.png');
		background-size: 100% 100%;

		.nav-box {
			text {
				display: inline-block;
				// padding: R(20) 0;
				color: #1a1a1a;
				width: 25%;
				text-align: center;
				font-size: R(28px);
			}

			.active {
				// border-bottom-right-radius: R(20);
			}
		}

		.d-bg-b {
			padding: R(20) R(22) R(24);
			// background: linear-gradient(to right, #a9b3f7, #c3ddf8);
		}

		.p-title {
			position: absolute;
			// background: url(@/common/images/home-icon/quan.png);
			background-size: 100% 100%;
			top: R(-62);
			left: 50%;
			transform: translateX(-50%);
			width: R(484);
			height: R(67);
			line-height: R(67);
			font-size: R(30px);
			font-weight: bold;
			color: #ffffff;
			text-align: center;
		}

		.l-box {
			overflow-x: scroll;
			white-space: nowrap;
			height: R(200);

			.d-box {
				padding: R(20px) R(30px);
				min-width: R(240px);
				background: #f6e7ee;
				text-align: center;
				display: inline-block;
				box-shadow: 0px R(10px) R(18px) 0px rgba(64, 93, 174, 0.18);
				border-radius: R(20px);
				margin-right: R(20);
			}

			.tradingBox {
				width: 48%;
			}

			.sub-title {
				font-size: R(26px);
				font-weight: 400;
				color: #262626;
				margin: R(20) R(10);
			}

			.title {
				// margin-bottom: R(30);
				margin: R(20px) 0;
				font-size: R(25px);
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #3E4D67;
			}

			.num {
				font-size: R(43px);
				font-family: Source Han Sans CN;
				// font-weight: bold;
				color: #0d0d0d;
			}

			.margin1 {
				margin-bottom: R(30);
			}

			.setMargin2 {
				margin-right: R(30);
			}
		}
	}

	.content-box {
		padding: R(30);
		background-color: #FFFFFF;
		box-shadow: 0 R(1px) R(10px) R(1px) rgba(137, 203, 254, 0.41);
		padding: R(20) R(20) 0;
		margin: R(40px)R(25px);
		border-radius: R(20px);

		.tag-title2 {
			position: relative;
		}

		.tag-title2::before {
			content: "";
			position: absolute;
			display: block;
			left: R(-20px);
			width: R(14px);
			height: R(14px);
			background-color: #008EFD;
			margin-top: R(15px);
			border-radius: R(50);
		}
	}

	.module-list {

		// margin: 0 R(30);
		flex-wrap: wrap;


		.item {
			width: 48%;
			color: #fff;
			min-height: R(180px);
			margin-bottom: R(25);
			background-size: 100% 100%;
			// padding: R(41) 0 R(30) R(28);
			position: relative;

			.name {
				font-size: R(30);
				font-weight: bold;
				margin-bottom: R(13);
				position: absolute;
				left: 0;
				top: 0;
				font-size: R(25px);
				width: R(180px);
				height: R(39px);
				line-height: R(39px);
				text-align: center;
				color: #FFFFFF;
			}

			.sub {
				font-size: R(24);
				font-weight: 400;
				width: 55%;
				line-height: R(35);
				margin-top: R(60px);
				margin-left: R(10px);
				font-size: R(20px);
			}

			.info {
				// margin-top: R(60px);
				margin-left: R(10px);
				font-size: R(24);
				font-weight: 400;
			}
		}
	}

	.echart {
		width: 100%;
		height: 190px;
		z-index: 9999;
		position: relative;

		.none {
			padding-top: R(140);
			text-align: center;
			color: #999;
		}
	}
</style>
